<script lang="ts">
  import { drawStore } from "../store.svelte";
  import {
    Type,
    Image,
    Component,
    Minus,
    Settings2,
    MessageCircleMore,
    Square,
    Circle,
    SquareKanban,
    Plus,
    Link,
    Disc3,
    BadgeIndianRupee,
    Download,
  } from "lucide-svelte";
  import { Accordion } from "@skeletonlabs/skeleton-svelte";
  import NodeSettingPanel from "./NodeSettingPanel.svelte";
  import { EXTDATA_TYPE_GIT } from "$lib/api/board/board_extdata";
  import ExportDrawModal from "../modal/ExportDrawModal.svelte";

  let showSettingModal = $state(false);
  let showExportModal = $state(false);
</script>

<div class="bg-surface-200-800 text-primary-900-100 w-[360px] rounded-[10px]">
  <Accordion collapsible padding="p-0">
    {#snippet iconOpen()}
      <div class="flex gap-2 items-center">
        {#if drawStore.boardInfo?.user_perm.can_update == true}
          <button
            type="button"
            class="btn p-1 pl-2 pr-2 hover:preset-tonal"
            title="导出图片"
            onclick={(e) => {
              e.stopPropagation();
              e.preventDefault();
              showExportModal = true;
            }}
          >
            <Download size={20} />
          </button>
          <button
            type="button"
            class="btn p-1 pl-2 pr-2 hover:preset-tonal"
            title="设置组件"
            onclick={(e) => {
              e.stopPropagation();
              e.preventDefault();
              showSettingModal = true;
            }}
          >
            <Settings2 size={20} />
          </button>
        {/if}
        <Minus size={14} />
      </div>
    {/snippet}
    {#snippet iconClosed()}
      <div class="flex gap-2 items-center">
        {#if drawStore.boardInfo?.user_perm.can_update == true}
          <button
            type="button"
            class="btn p-1 pl-2 pr-2 hover:preset-tonal"
            title="导出图片"
            onclick={(e) => {
              e.stopPropagation();
              e.preventDefault();
              showExportModal = true;
            }}
          >
            <Download size={20} />
          </button>
          <button
            type="button"
            class="btn p-1 pl-2 pr-2 hover:preset-tonal"
            title="设置组件"
            onclick={(e) => {
              e.stopPropagation();
              e.preventDefault();
              showSettingModal = true;
            }}
          >
            <Settings2 size={20} />
          </button>
        {/if}
        <Plus size={14} />
      </div>
    {/snippet}
    <Accordion.Item
      value="club"
      panelPadding="p-0"
      controlHover="hover:preset-filled-primary-200-800"
    >
      {#snippet lead()}<Component size={24} />{/snippet}
      {#snippet control()}组件库{/snippet}
      <!-- Panel -->
      {#snippet panel()}
        <div class="p-2 gap-1 flex flex-wrap">
          <div
            role="none"
            title="可拖动到面板上"
            class="flex gap-1 cursor-grab hover:preset-filled-primary-200-800 p-1 w-[110px]"
            draggable={true}
            ondragstart={(e) => {
              drawStore.curToolInfo = {
                content: {
                  TextContent: {
                    text: "文本",
                    font_size: "text-base",
                    font_weight: "font-medium",
                  },
                },
                defaultWidth: 150,
                defaultHeight: 100,
                showModal: false,
              };
              if (e.dataTransfer != null) {
                e.dataTransfer.effectAllowed = "move";
              }
            }}
          >
            <Type /> 文本
          </div>

          <div
            role="none"
            title="可拖动到面板上"
            class="flex gap-1 cursor-grab hover:preset-filled-primary-200-800 p-1 w-[110px]"
            draggable={true}
            ondragstart={(e) => {
              drawStore.curToolInfo = {
                content: {
                  BasicRectangleContent: {
                    text: "",
                    font_size: "text-base",
                    font_weight: "font-medium",
                  },
                },
                defaultWidth: 200,
                defaultHeight: 200,
                showModal: false,
              };
              if (e.dataTransfer != null) {
                e.dataTransfer.effectAllowed = "move";
              }
            }}
          >
            <Square /> 矩形
          </div>

          <div
            role="none"
            title="可拖动到面板上"
            class="flex gap-1 cursor-grab hover:preset-filled-primary-200-800 p-1 w-[110px]"
            draggable={true}
            ondragstart={(e) => {
              drawStore.curToolInfo = {
                content: {
                  BasicEllipseContent: {
                    text: "",
                    font_size: "text-base",
                    font_weight: "font-medium",
                  },
                },
                defaultWidth: 200,
                defaultHeight: 200,
                showModal: false,
              };
              if (e.dataTransfer != null) {
                e.dataTransfer.effectAllowed = "move";
              }
            }}
          >
            <Circle /> 圆形
          </div>

          {#if (drawStore.boardInfo?.llm_list ?? []).length > 0}
            <div
              role="none"
              title="可拖动到面板上"
              class="flex gap-1 cursor-grab hover:preset-filled-primary-200-800 p-1 w-[110px]"
              draggable={true}
              ondragstart={(e) => {
                drawStore.curToolInfo = {
                  content: {
                    LlmAskContent: {
                      content: "",
                    },
                  },
                  defaultWidth: 200,
                  defaultHeight: 100,
                  showModal: false,
                };
                if (e.dataTransfer != null) {
                  e.dataTransfer.effectAllowed = "move";
                }
              }}
            >
              <MessageCircleMore /> AI助理
            </div>
          {/if}

          {#if drawStore.boardInfo?.node_panel_setting.show_svg_node}
            <div
              role="none"
              title="可拖动到面板上"
              class="flex gap-1 cursor-grab hover:preset-filled-primary-200-800 p-1 w-[110px]"
              draggable={true}
              ondragstart={(e) => {
                drawStore.curToolInfo = {
                  content: {
                    BasicSvgContent: {
                      svg_id: "",
                    },
                  },
                  defaultWidth: 150,
                  defaultHeight: 150,
                  showModal: true,
                };
                if (e.dataTransfer != null) {
                  e.dataTransfer.effectAllowed = "move";
                }
              }}
            >
              <Disc3 /> 图标
            </div>
          {/if}

          {#if drawStore.boardInfo?.node_panel_setting.show_image_node}
            <div
              role="none"
              title="可拖动到面板上"
              class="flex gap-1 cursor-grab hover:preset-filled-primary-200-800 p-1 w-[110px]"
              draggable={true}
              ondragstart={(e) => {
                drawStore.curToolInfo = {
                  content: {
                    BasicImageContent: {
                      file_id: "",
                    },
                  },
                  defaultWidth: 150,
                  defaultHeight: 150,
                  showModal: true,
                };
                if (e.dataTransfer != null) {
                  e.dataTransfer.effectAllowed = "move";
                }
              }}
            >
              <Image /> 图片
            </div>
          {/if}

          {#if drawStore.boardInfo?.node_panel_setting.show_link_node}
            <div
              role="none"
              title="可拖动到面板上"
              class="flex gap-1 cursor-grab hover:preset-filled-primary-200-800 p-1 w-[110px]"
              draggable={true}
              ondragstart={(e) => {
                drawStore.curToolInfo = {
                  content: {
                    BasicLinkContent: {
                      link_name: "",
                      link_url: "",
                    },
                  },
                  defaultWidth: 200,
                  defaultHeight: 100,
                  showModal: true,
                };
                if (e.dataTransfer != null) {
                  e.dataTransfer.effectAllowed = "move";
                }
              }}
            >
              <Link /> 链接
            </div>
          {/if}

          {#if drawStore.extDataInfoList.filter((item) => item.basic_info.ext_data_type == EXTDATA_TYPE_GIT).length > 0}
            <div
              role="none"
              title="可拖动到面板上"
              class="flex gap-1 cursor-grab hover:preset-filled-primary-200-800 p-1 w-[110px]"
              draggable={true}
              ondragstart={(e) => {
                drawStore.curToolInfo = {
                  content: {
                    DevelopIssueContent: {
                      git_serv_id: "",
                      owner_path: "",
                      repo_path: "",
                      issue_number: "",
                    },
                  },
                  defaultWidth: 150,
                  defaultHeight: 250,
                  showModal: true,
                };
                if (e.dataTransfer != null) {
                  e.dataTransfer.effectAllowed = "move";
                }
              }}
            >
              <SquareKanban /> 议题
            </div>
          {/if}
          {#if drawStore.boardInfo?.node_panel_setting.show_develop}
            <div
              role="none"
              title="可拖动到面板上"
              class="flex gap-1 cursor-grab hover:preset-filled-primary-200-800 p-1 w-[110px]"
              draggable={true}
              ondragstart={(e) => {
                drawStore.curToolInfo = {
                  content: {
                    DevelopMermaidContent: {
                      content: "",
                    },
                  },
                  defaultWidth: 400,
                  defaultHeight: 400,
                  showModal: true,
                };
                if (e.dataTransfer != null) {
                  e.dataTransfer.effectAllowed = "move";
                }
              }}
            >
              <BadgeIndianRupee /> Mermaid
            </div>
          {/if}
        </div>
      {/snippet}
    </Accordion.Item>
  </Accordion>
</div>

<div class="absolute -left-[10000px]">
  {#if showSettingModal}
    <NodeSettingPanel onClose={() => (showSettingModal = false)} />
  {/if}
  {#if showExportModal}
    <ExportDrawModal onClose={() => (showExportModal = false)} />
  {/if}
</div>
